<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档笔记</title>

<style>
.note {
	margin: 10px auto
}

#note {
	height: 20px;
	width: 20%
}

.button {
	margin: 20px auto;
	text-align: center;
}
#save{
    height: 35px;
	width: 80px;
}
</style>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="/wangEditor.js"></script>

</head>
<body>
	<div>
		<div class="note">标题</div>
		<div class="note">
			<input id="title" type="text" style="width: 200px; height: 25px;">
		</div>
		<div class="note">内容</div>
		<div id="editor"></div>
		<div class="button">
			<button id="save">保存</button>
		</div>

	</div>
</body>

<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->

<script type="text/javascript">
	var E = window.wangEditor
	var editor = new E('#editor')
	// 或者 var editor = new E( document.getElementById('editor') )
	editor.create()
</script>

<script>
	jQuery("#save").click(function() {
		var obj = new Object();
		obj.title = $("#title").val();
		obj.note = editor.txt.text();
		obj.time = new Date();
		$.ajax({
			url : "./save",
			datatype : "JSON",
			//contentType: 'application/json;charset=utf-8',
			data : {
				note : JSON.stringify(obj)
			},
			success : function(data) {
				alert("保存成功!");
			},
			error : function(data) {
				alert("保存失败!");
			}
		})
	})
</script>

</html>